<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" :eqname="eqname" three="true" :time="time" />
        </div>
        <div class="bnr-con">
          <a-row :gutter="12" class="up">
            <a-col :span="16" style="height:100%">
              <div class="center1 number">
                <div
                  class="num_box"
                  v-for="(item, index) in numList"
                  :key="index"
                >
                  <dv-border-box-7
                    :color="['#00b1ff', '#00e6ff']"
                    style="box-shadow: rgb(0, 177, 255) 0px 0px 20px inset"
                  >
                    <div>
                      <p class="num">{{ item.num }}</p>
                      <p class="text">{{ item.title }}</p>
                    </div>
                  </dv-border-box-7>
                </div>
              </div>
              <div class="box-border center2">
                <div class="tit">产量与不良率统计</div>
                <center-2 ref="center2" cx="A"></center-2>
              </div>
              <div class="box-border three" style="margin-top:1.5vh">
                <!-- <div class="tit">设备监控</div> -->
                <div class="center3">
                  <center-3-1
                    ref="center3"
                    cx="A"
                    style="width:30%"
                  ></center-3-1>
                  <center-3-2
                    ref="center4"
                    cx="A"
                    style="width:70%"
                  ></center-3-2>
                </div>
              </div>
            </a-col>
            <a-col :span="8" style="height:100%">
              <div class="box-border two ">
                <div class="tit">一次通过率</div>
                <left-1 ref="left1" cx="A"></left-1>
              </div>
              <div class="box-border two">
                <div class="tit">日常点检</div>
                <left-2 ref="left2" cx="A"></left-2>
              </div>
              <div class=" box-border three">
                <div class="tit">产线出勤人数</div>
                <left-3 ref="left3" cx="A"></left-3>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/cj2/ToHead.vue'
import { bnrQuery } from './api/dataApi'
import Left1 from './components/cj2/Left1.vue'
import Left3 from './components/cj2/Left3.vue'
import Center2 from './components/cj2/Center2.vue'
import Center31 from './components/cj2/Center3-1.vue'
import Center32 from './components/cj2/Center3-2.vue'
import Left2 from './components/cj2/Left2.vue'

export default {
  name: 'App',
  components: {
    ToHead,
    Center2,
    Left3,
    Left1,
    Center31,
    Center32,
    Left2,
  },
  data() {
    return {
      title: '车间生产管理大屏',
      eqList: [],
      bjData: [],
      pageIndex: 1,
      eqname: '',
      description: '',
      timeInterval: null,
      eqDetail: {},
      index: 0,
      numList: [],
    }
  },
  props: {
    time: {
      type: String,
      default: '',
    },
  },
  created() {
    this.getData()
    // this.$refs.left1.getData()
    // this.$refs.center2.getData()
    // this.$refs.center3.getData()
    // this.$refs.center4.getData()
    // this.$refs.right3.getData()
  },
  mounted() {
    this.timeInterval = setInterval(() => {
      this.getData()
      this.$nextTick(() => {
        this.$refs.left1.getData()
        this.$refs.left3.getData()
        this.$refs.center2.getData()
        this.$refs.center3.getData()
        this.$refs.center4.getData()
        this.$refs.left2.getData()
      })
    }, 1000 * 60 * 5)
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_manage_prod_chart_tj_a'
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageIndex: -1,
        sortField: '',
        sortOrder: '',
      }
      bnrQuery(params)
        .then((res) => {
          this.numList = res.data ? res.data : []
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    destroyed() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
  },
}
</script>

<style lang="less" scoped>
.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  // padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.bnr-con {
  height: 90vh;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 1vh;
}
.two {
  height: 30.5vh;
  margin-bottom: 1.5vh;
}
.three {
  height: 26.5vh;
}
.center1 {
  height: 13vh;
}
.warrper ::v-deep .dv-border-box-7 .border-box-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.number {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  .num_box {
    flex: 25%;
    height: 100%;
    margin-right: 10px;
    .num {
      .px2font(36);
    }
    .text {
      .px2font(16);
    }
  }
  .num_box:nth-child(1) {
    div {
      color: #01c0ff;
    }
  }
  .num_box:nth-child(2) {
    div {
      color: #09f2ed;
    }
  }
  .num_box:nth-child(3) {
    div {
      color: #39fb9e;
    }
  }
  .num_box:nth-child(4) {
    margin-right: 0px;
    div {
      color: #eee15f;
    }
  }
}
.center2 {
  margin-top: 1.5vh;
  height: 48vh;
}

.center3 {
  display: flex;
  justify-content: center;
  align-items: top;
  flex-direction: row;
  flex-wrap: nowrap;
}

.box-border3 {
  background: url('./assets/svg/border2.svg');
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}
.left {
  padding: 0px 15px;
  .px2vh(line-height, 48);
  text-align: left;
  .px2font(13);
  .anticon {
    .px2font(20);
    vertical-align: middle;
  }
}
.tit {
  .px2font(20);
  .px2vh(padding-top, 8);
  .px2vw(padding-left, 15);
  .px2vh(padding-bottom, 8);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(21, 60, 160, 0.05),
    rgba(29, 62, 208, 0.3) 50%,
    rgba(21, 60, 160, 0.05)
  );
}
.runing {
  font-weight: bold;
  // background: rgba(51, 204, 255, 0.6);
  border: 1px solid #07d7ca;
  // box-shadow: inset 0px 0px 20px 0px rgba(2, 187, 124, 0.5);
  // box-shadow: inset 0px 0px 20px 0px rgba(51, 204, 255, 0.5);
  box-shadow: inset 0px 0px 20px 0px rgba(39, 255, 242, 0.5);
  .anticon {
    color: #27fff2 !important;
  }
  span {
    color: #27fff2 !important;
  }
}

.table-bg {
  background: url('./assets/images/bk2.png');
  background-size: 100% 100%;
  height: 37vh;
}
.name {
  .px2vw(width, 330);
  margin: 0 auto;
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
  p {
    line-height: 26px;
  }
  span {
    color: #ddd;
    font-size: 14px;
  }
  .hwname {
    color: #67e0e3;
    font-size: 16px;
    letter-spacing: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.warrper ::v-deep .dv-scroll-board .rows .ceil {
  .px2font(14) !important;
  color: #eee;
}

.warrper ::v-deep .dv-scroll-board .header .header-item {
  .px2font(16) !important;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 5px 16px 5px 0;
}
</style>
